<template>
  <div class="content">
    <dt-search ref="search" :xlBtn="12" :label-width="60" @reset="onReset">
      <Button type="primary" v-if="unlocking('0112040201')" @click="onCreate">新建职级点数</Button>
      <Button type="primary" v-if="unlocking('0112040205')" @click="onImport">引入职级跳点</Button>
      <Button type="primary">
        <a href="https://images.tospurfang.com/doc/%E8%81%8C%E7%BA%A7%E7%82%B9%E6%95%B0%E6%93%8D%E4%BD%9C%E8%AF%B4%E6%98%8E.pdf" target="_blank" style="color:#fff;">
          查看操作指引
        </a>
      </Button>
    </dt-search>
    
    <dt-grid ref="table" :columns="columns" :page="{ current: search.current, rows: search.rows }" :onFetch='onFetch' />
    
    <import-modal ref="import" />
    <process-modal ref="process" />
	</div>
</template>

<script>
  import importModal from '../components/import-modal.vue'
  import processModal from '@/components/biz/audit/process-modal.vue'
  import columnOpt from './opt/column.js'
  import searchOpt from './opt/search.js'
  import levelMgr from '@/biz/bonus/level.js'
  import auditMgr from '@/biz/flowApproval/processAudit.js'
  
  export default {
    components: {
      importModal,
      processModal
    },
    data() {
      return {
        columns: [],
        search: {
          current: 1,
          rows: 50
        }
      }
    },
    mounted() {
      if (levelMgr.getSearch()) this.search = { ...levelMgr.getSearch() }
      this.columns = columnOpt.options(this.status)
      this.$refs.table.init(this)
      this.$refs.search.init(this.$refs.table, searchOpt.options(this), {
        status: this.search.status || ''
      })
      this.$refs.table.fetch()
    },
    methods: {
      onReset() {
        levelMgr.saveSearch(null)
        this.search = {
          current: 1,
          rows: 50
        }
        this.$refs.search.init(this.$refs.table, searchOpt.options(this), {
          status: ''
        })
      },
      onImport() {
        this.$refs.import.show('level')
      },
      onCreate() {
        this.$router.push({
          name: 'levelPointsEdit'
        })
      },
      onDetail(data) {
        levelMgr.saveSearch(this.search)
        this.$router.push({
          name: 'levelPointsDetail',
          query: {
            rankPointsId: data.rankPointsId,
          }
        })
      },
      onBack(data) {
        this.$Modal.confirm({
          title: '是否撤回该职级点数模板的审核？',
          onOk: () => {
            auditMgr.back({
              businessId: data.rankPointsId,
              auditType: 2
            }).then(res => {
              this.$Message.success('撤回成功')
              this.$refs.table.fetch()
            })
          }
        })
      },
      onFlow(data) {
        this.$refs.process.show({
          businessId: data.rankPointsId,
          auditType: 2
        })
      },
      onCopy(data) {
        levelMgr.saveSearch(this.search)
        this.$router.push({
          name: 'levelPointsEdit',
          query: {
            rankPointsId: data.rankPointsId,
          }
        })
      },
      onDelete(data) {
        this.$Modal.confirm({
          title: '是否删除该职级点数？',
          onOk: () => {
            levelMgr.del(data.rankPointsId).then(() => {
              this.$Message.success('删除成功')
              this.$refs.table.fetch()
            })
          },
        })
      },
      onFetch(data) {
        this.search = data
        return levelMgr.list(data)
      }
    },
  }
</script>

<style lang="scss" scoped>
  .content {
    padding: 20px;
  }
</style>
